// 忽略编译器对于优先使用const构造函数和const字面量的警告
// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

// 导入英语单词包，用于生成随机单词对
import 'package:english_words/english_words.dart';
// 导入Flutter的Material Design组件库
import 'package:flutter/material.dart';
// 导入Provider状态管理包
import 'package:provider/provider.dart';
// 导入HTTP请求包，用于翻译API调用
import 'package:http/http.dart' as http;
// 导入JSON操作包
import 'dart:convert';
// 导入SharedPreferences包，用于本地存储
import 'package:shared_preferences/shared_preferences.dart';

// 应用程序的入口点函数
void main() {
  // 运行Flutter应用，传入根Widget MyApp
  runApp(MyApp());
}

// 定义应用的根Widget类，继承自StatelessWidget（无状态组件）
class MyApp extends StatelessWidget {
  // 常量构造函数，接受可选的key参数并传递给父类
  const MyApp({super.key});

  // 重写build方法，构建Widget树
  @override
  Widget build(BuildContext context) {
    // 返回一个ChangeNotifierProvider，用于在Widget树中提供状态管理
    return ChangeNotifierProvider(
      // 创建MyAppState实例，作为状态管理对象
      create: (context) => MyAppState(),
      // 子组件：MaterialApp，Flutter应用的根组件
      child: Consumer<MyAppState>(
        builder: (context, appState, child) {
          return MaterialApp(
            // 应用标题
            title: 'Namer App',
            // 应用主题配置
            theme: ThemeData(
              // 启用Material Design 3
              useMaterial3: true,
              // 从当前主题颜色生成颜色方案
              colorScheme: ColorScheme.fromSeed(seedColor: appState.themeColor),
            ),
            // 应用的主页面Widget
            home: MyHomePage(),
          );
        },
      ),
    );
  }
}

// 定义应用状态管理类，继承自ChangeNotifier以便通知监听者状态变化
class MyAppState extends ChangeNotifier {
  // 当前显示的随机单词对
  var current = WordPair.random();
  // 历史记录列表，存储生成过的单词对
  var history = <WordPair>[];

  // 历史列表的全局键，用于控制动画列表
  GlobalKey? historyListKey;

  // 收藏夹列表，存储用户喜欢的单词对
  var favorites = <WordPair>[];

  // 存储单词翻译的映射表
  var translations = <String, String>{};

  // 应用主题颜色，默认为紫色
  var themeColor = Color.fromARGB(255, 85, 14, 165);

  // 预设的主题颜色选项
  final List<Color> themeColors = [
    Color.fromARGB(255, 85, 14, 165), // 紫色
    Colors.blue,                      // 蓝色
    Colors.green,                     // 绿色
    Colors.orange,                    // 橙色
    Colors.red,                       // 红色
    Colors.teal,                      // 青色
    Colors.pink,                      // 粉色
    Colors.indigo,                    // 靛蓝色
  ];

  // SharedPreferences实例
  SharedPreferences? _prefs;

  // 构造函数，初始化时加载持久化数据
  MyAppState() {
    _loadData();
  }

  // 从本地存储加载数据
  Future<void> _loadData() async {
    try {
      _prefs = await SharedPreferences.getInstance();
      
      // 加载收藏夹数据
      final favoriteStrings = _prefs?.getStringList('favorites') ?? [];
      favorites = favoriteStrings.map((str) {
        final parts = str.split('|');
        if (parts.length == 2) {
          return WordPair(parts[0], parts[1]);
        }
        return WordPair.random(); // 如果数据格式有问题，返回随机单词对
      }).toList();

      // 加载主题颜色
      final savedColorValue = _prefs?.getInt('themeColor');
      if (savedColorValue != null) {
        themeColor = Color(savedColorValue);
      }

      // 加载翻译缓存
      final translationKeys = _prefs?.getStringList('translation_keys') ?? [];
      final translationValues = _prefs?.getStringList('translation_values') ?? [];
      if (translationKeys.length == translationValues.length) {
        for (int i = 0; i < translationKeys.length; i++) {
          translations[translationKeys[i]] = translationValues[i];
        }
      }

      // 通知监听者数据已加载
      notifyListeners();
    } catch (e) {
      print('加载本地数据时出错: $e');
    }
  }

  // 保存收藏夹到本地存储
  Future<void> _saveFavorites() async {
    try {
      final favoriteStrings = favorites.map((pair) => '${pair.first}|${pair.second}').toList();
      await _prefs?.setStringList('favorites', favoriteStrings);
    } catch (e) {
      print('保存收藏夹时出错: $e');
    }
  }

  // 保存主题颜色到本地存储
  Future<void> _saveThemeColor() async {
    try {
      await _prefs?.setInt('themeColor', themeColor.value);
    } catch (e) {
      print('保存主题颜色时出错: $e');
    }
  }

  // 保存翻译缓存到本地存储
  Future<void> _saveTranslations() async {
    try {
      final keys = translations.keys.toList();
      final values = translations.values.toList();
      await _prefs?.setStringList('translation_keys', keys);
      await _prefs?.setStringList('translation_values', values);
    } catch (e) {
      print('保存翻译缓存时出错: $e');
    }
  }

  // 改变主题颜色的方法
  void changeThemeColor(Color newColor) {
    themeColor = newColor;
    _saveThemeColor(); // 保存到本地存储
    notifyListeners();
  }

  // 清除所有本地数据的方法
  Future<void> clearAllData() async {
    try {
      // 清除内存中的数据
      favorites.clear();
      translations.clear();
      themeColor = Color.fromARGB(255, 85, 14, 165); // 重置为默认主题色
      
      // 清除本地存储数据
      await _prefs?.remove('favorites');
      await _prefs?.remove('themeColor');
      await _prefs?.remove('translation_keys');
      await _prefs?.remove('translation_values');
      
      // 通知监听者数据已清除
      notifyListeners();
    } catch (e) {
      print('清除数据时出错: $e');
    }
  }

  // 获取导出数据的方法
  Map<String, dynamic> getExportData() {
    return {
      'favorites': favorites.map((pair) => '${pair.first}|${pair.second}').toList(),
      'translations': translations,
      'themeColor': themeColor.value,
      'exportTime': DateTime.now().toIso8601String(),
    };
  }

  // 获取单词翻译的方法（使用免费的翻译API）
  Future<String> getTranslation(String word) async {
    // 如果已经翻译过，直接返回缓存的结果
    if (translations.containsKey(word)) {
      return translations[word]!;
    }

    try {
      // 使用免费的翻译API (MyMemory)
      final url = 'https://api.mymemory.translated.net/get?q=$word&langpair=en|zh';
      final response = await http.get(Uri.parse(url));
      
      if (response.statusCode == 200) {
        final data = jsonDecode(response.body);
        final translation = data['responseData']['translatedText'] as String;
        
        // 缓存翻译结果
        translations[word] = translation;
        // 保存翻译缓存到本地存储
        _saveTranslations();
        return translation;
      } else {
        // API调用失败时返回默认说明
        return '翻译加载中...';
      }
    } catch (e) {
      // 网络错误时返回简单的中文说明
      final simpleTranslations = {
        'house': '房子',
        'dog': '狗',
        'cat': '猫',
        'book': '书',
        'water': '水',
        'fire': '火',
        'tree': '树',
        'car': '汽车',
        'phone': '电话',
        'computer': '电脑',
      };
      
      final translation = simpleTranslations[word.toLowerCase()] ?? '英文单词';
      translations[word] = translation;
      // 保存翻译缓存到本地存储
      _saveTranslations();
      return translation;
    }
  }

  // 生成下一个随机单词对的方法
  void getNext() {
    // 将当前单词对插入到历史记录的开头
    history.insert(0, current);
    // 获取动画列表的状态
    var animatedList = historyListKey?.currentState as AnimatedListState?;
    // 在动画列表中插入新项目（带动画效果）
    animatedList?.insertItem(0);
    // 生成新的随机单词对
    current = WordPair.random();
    // 通知所有监听者状态已改变
    notifyListeners();
  }

  // 切换收藏状态的方法，可以传入特定单词对，否则使用当前单词对
  void toggleFavorite([WordPair? pair]) {
    // 如果没有传入单词对，则使用当前单词对
    pair = pair ?? current;
    // 如果收藏夹中已包含该单词对
    if (favorites.contains(pair)) {
      // 从收藏夹中移除
      favorites.remove(pair);
    } else {
      // 否则添加到收藏夹
      favorites.add(pair);
    }
    // 保存收藏夹到本地存储
    _saveFavorites();
    // 通知所有监听者状态已改变
    notifyListeners();
  }

  // 从收藏夹中移除指定单词对的方法
  void removeFavorite(WordPair pair) {
    // 从收藏夹列表中移除指定的单词对
    favorites.remove(pair);
    // 保存收藏夹到本地存储
    _saveFavorites();
    // 通知所有监听者状态已改变
    notifyListeners();
  }
}

// 主页面Widget类，继承自StatefulWidget（有状态组件）
class MyHomePage extends StatefulWidget {
  // 重写createState方法，创建状态对象
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// 主页面的状态类，继承自State
class _MyHomePageState extends State<MyHomePage> {
  // 当前选中的导航索引，默认为0（首页）
  var selectedIndex = 0;

  // 重写build方法，构建Widget树
  @override
  Widget build(BuildContext context) {
    // 获取当前主题的颜色方案
    var colorScheme = Theme.of(context).colorScheme;

    // 声明页面Widget变量
    Widget page;
    // 根据选中的索引决定显示哪个页面
    switch (selectedIndex) {
      case 0:
        // 索引0：生成器页面
        page = GeneratorPage();
        break;
      case 1:
        // 索引1：收藏夹页面
        page = FavoritesPage();
        break;
      case 2:
        // 索引2：设置页面
        page = SettingsPage();
        break;
      default:
        // 未实现的索引，抛出异常
        throw UnimplementedError('no widget for $selectedIndex');
    }

    // 当前页面的容器，包含背景颜色和平滑的切换动画
    var mainArea = ColoredBox(
      // 设置背景颜色为主题的表面变体色
      color: colorScheme.surfaceVariant,
      // 动画切换器，在页面切换时添加动画效果
      child: AnimatedSwitcher(
        // 动画持续时间：200毫秒
        duration: Duration(milliseconds: 200),
        // 当前要显示的页面
        child: page,
      ),
    );

    // 返回Scaffold作为页面的基本结构
    return Scaffold(
      // 使用LayoutBuilder根据屏幕尺寸调整布局
      body: LayoutBuilder(
        builder: (context, constraints) {
          // 如果屏幕宽度小于450像素（移动设备）
          if (constraints.maxWidth < 450) {
            // 使用底部导航栏的移动端友好布局
            return Column(
              children: [
                // 扩展的主内容区域
                Expanded(child: mainArea),
                // 安全区域，避免被系统UI遮挡
                SafeArea(
                  // 底部导航栏
                  child: BottomNavigationBar(
                    // 导航项列表
                    items: [
                      // 首页导航项
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home), // 首页图标
                        label: 'Home', // 标签文本
                      ),
                      // 收藏夹导航项
                      BottomNavigationBarItem(
                        icon: Icon(Icons.favorite), // 收藏图标
                        label: 'Favorites', // 标签文本
                      ),
                      // 设置导航项
                      BottomNavigationBarItem(
                        icon: Icon(Icons.settings), // 设置图标
                        label: 'Settings', // 标签文本
                      ),
                    ],
                    // 当前选中的索引
                    currentIndex: selectedIndex,
                    // 点击导航项时的回调函数
                    onTap: (value) {
                      // 调用setState更新状态，触发重建
                      setState(() {
                        // 更新选中的索引
                        selectedIndex = value;
                      });
                    },
                  ),
                ),
              ],
            );
          } else {
            // 宽屏设备使用侧边导航栏布局
            return Row(
              children: [
                // 安全区域，避免被系统UI遮挡
                SafeArea(
                  // 导航栏组件
                  child: NavigationRail(
                    // 当宽度>=600时展开显示标签
                    extended: constraints.maxWidth >= 600,
                    // 导航目标列表
                    destinations: [
                      // 首页导航目标
                      NavigationRailDestination(
                        icon: Icon(Icons.home), // 首页图标
                        label: Text('Home'), // 标签文本
                      ),
                      // 收藏夹导航目标
                      NavigationRailDestination(
                        icon: Icon(Icons.favorite), // 收藏图标
                        label: Text('Favorites'), // 标签文本
                      ),
                      // 设置导航目标
                      NavigationRailDestination(
                        icon: Icon(Icons.settings), // 设置图标
                        label: Text('Settings'), // 标签文本
                      ),
                    ],
                    // 当前选中的索引
                    selectedIndex: selectedIndex,
                    // 选择目标时的回调函数
                    onDestinationSelected: (value) {
                      // 调用setState更新状态，触发重建
                      setState(() {
                        // 更新选中的索引
                        selectedIndex = value;
                      });
                    },
                  ),
                ),
                // 扩展的主内容区域
                Expanded(child: mainArea),
              ],
            );
          }
        },
      ),
    );
  }
}

// 生成器页面类，继承自StatelessWidget（无状态组件）
class GeneratorPage extends StatelessWidget {
  // 重写build方法，构建Widget树
  @override
  Widget build(BuildContext context) {
    // 监听MyAppState状态变化，获取应用状态
    var appState = context.watch<MyAppState>();
    // 获取当前的单词对
    var pair = appState.current;

    // 声明图标数据变量
    IconData icon;
    // 判断当前单词对是否已被收藏
    if (appState.favorites.contains(pair)) {
      // 如果已收藏，使用实心爱心图标
      icon = Icons.favorite;
    } else {
      // 如果未收藏，使用空心爱心图标
      icon = Icons.favorite_border;
    }

    // 返回居中布局的组件
    return Center(
      // 垂直列布局
      child: Column(
        // 主轴对齐方式：居中
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 历史记录视图，占用3倍空间
          Expanded(flex: 3, child: HistoryListView()),
          // 垂直间距10像素
          SizedBox(height: 10),
          // 大卡片组件，显示当前单词对
          BigCard(pair: pair),
          // 垂直间距10像素
          SizedBox(height: 10),
          // 水平行布局，包含操作按钮
          Row(
            // 主轴尺寸：最小
            mainAxisSize: MainAxisSize.min,
            children: [
              // 带图标的升级按钮（喜欢按钮）
              ElevatedButton.icon(
                // 按钮点击事件：切换收藏状态
                onPressed: () {
                  appState.toggleFavorite();
                },
                // 按钮图标
                icon: Icon(icon),
                // 按钮文本标签
                label: Text('Like'),
              ),
              // 水平间距10像素
              SizedBox(width: 10),
              // 升级按钮（下一个按钮）
              ElevatedButton(
                // 按钮点击事件：生成下一个单词对
                onPressed: () {
                  appState.getNext();
                },
                // 按钮文本
                child: Text('Next'),
              ),
            ],
          ),
          // 弹性空间，占用2倍空间
          Spacer(flex: 2),
        ],
      ),
    );
  }
}

// 大卡片组件类，用于显示单词对，继承自StatelessWidget
class BigCard extends StatelessWidget {
  // 常量构造函数，必须传入单词对参数
  const BigCard({Key? key, required this.pair}) : super(key: key);

  // 最终的单词对属性，不可修改
  final WordPair pair;

  // 重写build方法，构建Widget树
  @override
  Widget build(BuildContext context) {
    // 获取当前主题
    var theme = Theme.of(context);
    // 获取应用状态，用于翻译功能
    var appState = context.watch<MyAppState>();
    
    // 创建标题文本样式
    var titleStyle = theme.textTheme.displayMedium!.copyWith(
      // 设置文本颜色为主色调上的颜色
      color: theme.colorScheme.onPrimary,
    );

    // 返回卡片组件
    return Card(
      // 设置卡片背景色为主色调
      color: theme.colorScheme.primary,
      // 内边距组件
      child: Padding(
        // 设置内边距为20像素
        padding: const EdgeInsets.all(20),
        // 动画尺寸组件，尺寸变化时有动画效果
        child: AnimatedSize(
          // 动画持续时间：200毫秒
          duration: Duration(milliseconds: 200),
          // 合并语义组件，用于辅助功能
          child: MergeSemantics(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 自动换行组件，确保单词在窗口过窄时正确换行
                Wrap(
                  children: [
                    // 第一个单词，带工具提示
                    FutureBuilder<String>(
                      future: appState.getTranslation(pair.first),
                      builder: (context, snapshot) {
                        final translation = snapshot.data ?? '加载中...';
                        return Tooltip(
                          message: '${pair.first}\n中文: $translation\n发音: /${pair.first}/',
                          textStyle: TextStyle(color: Colors.white, fontSize: 14),
                          decoration: BoxDecoration(
                            color: Colors.black87,
                            borderRadius: BorderRadius.circular(8),
                          ),
                          padding: EdgeInsets.all(12),
                          preferBelow: false,
                          child: Text(
                            pair.first,
                            // 设置字体粗细为细体
                            style: titleStyle.copyWith(fontWeight: FontWeight.w200),
                          ),
                        );
                      },
                    ),
                    // 第二个单词，带工具提示
                    FutureBuilder<String>(
                      future: appState.getTranslation(pair.second),
                      builder: (context, snapshot) {
                        final translation = snapshot.data ?? '加载中...';
                        return Tooltip(
                          message: '${pair.second}\n中文: $translation\n发音: /${pair.second}/',
                          textStyle: TextStyle(color: Colors.white, fontSize: 14),
                          decoration: BoxDecoration(
                            color: Colors.black87,
                            borderRadius: BorderRadius.circular(8),
                          ),
                          padding: EdgeInsets.all(12),
                          preferBelow: false,
                          child: Text(
                            pair.second,
                            // 设置字体粗细为粗体
                            style: titleStyle.copyWith(fontWeight: FontWeight.bold),
                          ),
                        );
                      },
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// 收藏夹页面类，继承自StatelessWidget（无状态组件）
class FavoritesPage extends StatelessWidget {
  // 重写build方法，构建Widget树
  @override
  Widget build(BuildContext context) {
    // 获取当前主题
    var theme = Theme.of(context);
    // 监听MyAppState状态变化，获取应用状态
    var appState = context.watch<MyAppState>();

    // 如果收藏夹为空
    if (appState.favorites.isEmpty) {
      // 返回居中显示的提示文本
      return Center(child: Text('No favorites yet.'));
    }

    // 返回垂直列布局
    return Column(
      // 交叉轴对齐方式：左对齐
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 内边距组件，包含标题文本
        Padding(
          // 设置内边距为30像素
          padding: const EdgeInsets.all(30),
          // 标题文本，显示收藏夹数量
          child: Text(
            'You have '
            '${appState.favorites.length} favorites:',
          ),
        ),
        // 扩展组件，占满剩余空间
        Expanded(
          // 网格视图，更好地利用宽屏空间
          child: GridView(
            // 网格代理，设置最大交叉轴范围和宽高比
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              // 最大交叉轴范围：400像素
              maxCrossAxisExtent: 400,
              // 子组件宽高比：400/80 = 5:1
              childAspectRatio: 400 / 80,
            ),
            children: [
              // 遍历收藏夹中的每个单词对
              for (var pair in appState.favorites)
                // 列表项组件
                ListTile(
                  // 前导组件：删除按钮
                  leading: IconButton(
                    // 删除图标，带语义标签
                    icon: Icon(Icons.delete_outline, semanticLabel: 'Delete'),
                    // 按钮颜色为主题主色调
                    color: theme.colorScheme.primary,
                    // 按钮点击事件：显示确认删除对话框
                    onPressed: () {
                      // 显示确认删除的对话框
                      _showDeleteConfirmDialog(context, pair, appState);
                    },
                  ),
                  // 标题：显示单词对的小写形式，带工具提示
                  title: FutureBuilder<List<String>>(
                    future: _getTranslationsForPair(appState, pair),
                    builder: (context, snapshot) {
                      String tooltipMessage = '${pair.asLowerCase}';
                      
                      if (snapshot.hasData) {
                        final translations = snapshot.data!;
                        tooltipMessage = '''${pair.asLowerCase}
第一个词: ${pair.first} - ${translations[0]}
第二个词: ${pair.second} - ${translations[1]}
发音: /${pair.first}/ + /${pair.second}/''';
                      }
                      
                      return Tooltip(
                        message: tooltipMessage,
                        textStyle: TextStyle(color: Colors.white, fontSize: 14),
                        decoration: BoxDecoration(
                          color: Colors.black87,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        padding: EdgeInsets.all(12),
                        preferBelow: false,
                        child: Text(
                          pair.asLowerCase,
                          // 语义标签：单词对的帕斯卡命名形式
                          semanticsLabel: pair.asPascalCase,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            decoration: TextDecoration.underline,
                            decorationStyle: TextDecorationStyle.dotted,
                          ),
                        ),
                      );
                    },
                  ),
                ),
            ],
          ),
        ),
      ],
    );
  }

  // 获取单词对翻译的辅助方法
  Future<List<String>> _getTranslationsForPair(MyAppState appState, WordPair pair) async {
    final firstTranslation = await appState.getTranslation(pair.first);
    final secondTranslation = await appState.getTranslation(pair.second);
    return [firstTranslation, secondTranslation];
  }

  // 显示删除确认对话框的方法
  void _showDeleteConfirmDialog(BuildContext context, WordPair pair, MyAppState appState) {
    // 显示对话框
    showDialog(
      // 传入上下文
      context: context,
      // 对话框构建器
      builder: (BuildContext context) {
        // 返回警告对话框
        return AlertDialog(
          // 对话框标题
          title: Text('确认删除'),
          // 对话框内容
          content: Text('确定要从收藏夹中删除 "${pair.asLowerCase}" 吗？'),
          // 对话框操作按钮
          actions: [
            // 取消按钮
            TextButton(
              // 取消按钮点击事件：关闭对话框
              onPressed: () {
                Navigator.of(context).pop(); // 关闭对话框
              },
              // 按钮文本
              child: Text('取消'),
            ),
            // 确认删除按钮
            TextButton(
              // 确认删除按钮点击事件
              onPressed: () {
                // 从收藏夹中移除该单词对
                appState.removeFavorite(pair);
                // 关闭对话框
                Navigator.of(context).pop();
              },
              // 按钮文本，使用红色表示删除操作
              child: Text(
                '删除',
                style: TextStyle(color: Colors.red),
              ),
            ),
          ],
        );
      },
    );
  }
}

// 历史记录列表视图类，继承自StatefulWidget（有状态组件）
class HistoryListView extends StatefulWidget {
  // 常量构造函数
  const HistoryListView({Key? key}) : super(key: key);

  // 重写createState方法，创建状态对象
  @override
  State<HistoryListView> createState() => _HistoryListViewState();
}

// 历史记录列表视图的状态类
class _HistoryListViewState extends State<HistoryListView> {
  // 全局键，用于MyAppState告知AnimatedList执行动画
  final _key = GlobalKey();

  // 用于让顶部历史项目"淡出"的遮罩渐变，暗示内容可以继续滚动
  static const Gradient _maskingGradient = LinearGradient(
    // 渐变颜色：从完全透明到完全不透明的黑色
    colors: [Colors.transparent, Colors.black],
    // 渐变停止点：从顶部（透明）到中间位置（0.5）
    stops: [0.0, 0.5],
    // 渐变开始位置：顶部中心
    begin: Alignment.topCenter,
    // 渐变结束位置：底部中心
    end: Alignment.bottomCenter,
  );

  // 重写build方法，构建Widget树
  @override
  Widget build(BuildContext context) {
    // 获取应用状态
    final appState = context.watch<MyAppState>();
    // 将当前组件的键赋值给应用状态的历史列表键
    appState.historyListKey = _key;

    // 返回着色器遮罩组件
    return ShaderMask(
      // 着色器回调函数，创建遮罩渐变
      shaderCallback: (bounds) => _maskingGradient.createShader(bounds),
      // 混合模式：将着色器的不透明度应用到目标（动画列表）
      blendMode: BlendMode.dstIn,
      // 动画列表组件
      child: AnimatedList(
        // 设置全局键
        key: _key,
        // 反向显示（最新项目在顶部）
        reverse: true,
        // 顶部内边距：100像素
        padding: EdgeInsets.only(top: 100),
        // 初始项目数量
        initialItemCount: appState.history.length,
        // 项目构建器函数
        itemBuilder: (context, index, animation) {
          // 获取对应索引的单词对
          final pair = appState.history[index];
          // 返回尺寸过渡动画组件
          return SizeTransition(
            // 动画因子
            sizeFactor: animation,
            // 居中组件
            child: Center(
              // 带图标的文本按钮，带工具提示
              child: FutureBuilder<List<String>>(
                future: _getHistoryTranslations(appState, pair),
                builder: (context, snapshot) {
                  String tooltipMessage = '${pair.asLowerCase}\n点击加入收藏';
                  
                  if (snapshot.hasData) {
                    final translations = snapshot.data!;
                    tooltipMessage = '''${pair.asLowerCase}
${pair.first} - ${translations[0]}
${pair.second} - ${translations[1]}
点击切换收藏状态''';
                  }
                  
                  return Tooltip(
                    message: tooltipMessage,
                    textStyle: TextStyle(color: Colors.white, fontSize: 12),
                    decoration: BoxDecoration(
                      color: Colors.black87,
                      borderRadius: BorderRadius.circular(6),
                    ),
                    padding: EdgeInsets.all(8),
                    preferBelow: false,
                    child: TextButton.icon(
                      // 按钮点击事件：切换该单词对的收藏状态
                      onPressed: () {
                        appState.toggleFavorite(pair);
                      },
                      // 按钮图标：如果已收藏显示爱心，否则显示空白
                      icon: appState.favorites.contains(pair)
                          ? Icon(Icons.favorite, size: 12)
                          : SizedBox(),
                      // 按钮标签：显示单词对的小写形式
                      label: Text(
                        pair.asLowerCase,
                        // 语义标签：单词对的帕斯卡命名形式
                        semanticsLabel: pair.asPascalCase,
                      ),
                    ),
                  );
                },
              ),
            ),
          );
        },
      ),
    );
  }

  // 获取历史记录单词对翻译的辅助方法
  Future<List<String>> _getHistoryTranslations(MyAppState appState, WordPair pair) async {
    final firstTranslation = await appState.getTranslation(pair.first);
    final secondTranslation = await appState.getTranslation(pair.second);
    return [firstTranslation, secondTranslation];
  }
}

// 设置页面Widget类，用于配置主题颜色等选项
class SettingsPage extends StatefulWidget {
  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  final _colorController = TextEditingController();
  String? _colorError;

  @override
  void dispose() {
    _colorController.dispose();
    super.dispose();
  }

  // 解析颜色字符串为Color对象
  Color? _parseColor(String colorString) {
    try {
      // 移除空格和#符号
      colorString = colorString.trim().replaceAll('#', '');
      
      // 如果是6位十六进制颜色码，添加FF前缀作为alpha值
      if (colorString.length == 6) {
        colorString = 'FF$colorString';
      }
      
      // 如果是8位十六进制颜色码
      if (colorString.length == 8) {
        final colorValue = int.parse(colorString, radix: 16);
        return Color(colorValue);
      }
      
      return null;
    } catch (e) {
      return null;
    }
  }

  // 验证并应用自定义颜色
  void _applyCustomColor() {
    final colorText = _colorController.text;
    final color = _parseColor(colorText);
    
    if (color != null) {
      final appState = context.read<MyAppState>();
      appState.changeThemeColor(color);
      setState(() {
        _colorError = null;
      });
      _colorController.clear();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('自定义颜色已应用！')),
      );
    } else {
      setState(() {
        _colorError = '请输入有效的颜色值（如：FF5722 或 #FF5722）';
      });
    }
  }

  // 显示清除数据确认对话框
  void _showClearDataDialog(BuildContext context, MyAppState appState) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('清除所有数据'),
          content: Text('确定要清除所有收藏、翻译缓存和设置吗？此操作不可撤销。'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('取消'),
            ),
            TextButton(
              onPressed: () async {
                await appState.clearAllData();
                Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('所有数据已清除！')),
                );
              },
              child: Text(
                '清除',
                style: TextStyle(color: Colors.red),
              ),
            ),
          ],
        );
      },
    );
  }

  // 显示导出数据对话框
  void _showExportDataDialog(BuildContext context, MyAppState appState) {
    final exportData = appState.getExportData();
    final jsonString = jsonEncode(exportData);
    
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('导出数据'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('数据已准备就绪：'),
              SizedBox(height: 8),
              Text('• 收藏单词: ${exportData['favorites'].length} 个'),
              Text('• 翻译缓存: ${exportData['translations'].length} 个'),
              SizedBox(height: 16),
              Text(
                '提示：你可以复制下面的JSON数据保存到文件中',
                style: TextStyle(fontSize: 12),
              ),
              SizedBox(height: 8),
              Container(
                height: 200,
                width: double.maxFinite,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: SingleChildScrollView(
                  padding: EdgeInsets.all(8),
                  child: SelectableText(
                    jsonString,
                    style: TextStyle(fontSize: 10, fontFamily: 'monospace'),
                  ),
                ),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('关闭'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    
    return Scaffold(
      appBar: AppBar(
        title: Text('设置'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '主题颜色',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            SizedBox(height: 16),
            Text(
              '选择预设主题颜色：',
              style: Theme.of(context).textTheme.bodyLarge,
            ),
            SizedBox(height: 16),
            Wrap(
              spacing: 12,
              runSpacing: 12,
              children: appState.themeColors.map((color) {
                final isSelected = appState.themeColor == color;
                return GestureDetector(
                  onTap: () {
                    appState.changeThemeColor(color);
                  },
                  child: Container(
                    width: 60,
                    height: 60,
                    decoration: BoxDecoration(
                      color: color,
                      shape: BoxShape.circle,
                      border: isSelected 
                          ? Border.all(color: Colors.black, width: 3)
                          : Border.all(color: Colors.grey.shade300, width: 1),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.2),
                          blurRadius: 4,
                          offset: Offset(0, 2),
                        ),
                      ],
                    ),
                    child: isSelected
                        ? Icon(
                            Icons.check,
                            color: Colors.white,
                            size: 30,
                          )
                        : null,
                  ),
                );
              }).toList(),
            ),
            SizedBox(height: 32),
            Divider(),
            SizedBox(height: 16),
            Text(
              '自定义颜色',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            SizedBox(height: 16),
            Text(
              '输入十六进制颜色代码：',
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            SizedBox(height: 8),
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _colorController,
                    decoration: InputDecoration(
                      hintText: '例如：FF5722 或 #2196F3',
                      errorText: _colorError,
                      border: OutlineInputBorder(),
                      prefixText: '#',
                      suffixIcon: IconButton(
                        icon: Icon(Icons.clear),
                        onPressed: () {
                          _colorController.clear();
                          setState(() {
                            _colorError = null;
                          });
                        },
                      ),
                    ),
                    onSubmitted: (_) => _applyCustomColor(),
                  ),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _applyCustomColor,
                  child: Text('应用'),
                ),
              ],
            ),
            SizedBox(height: 16),
            Container(
              padding: EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.surfaceVariant,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '颜色格式说明：',
                    style: Theme.of(context).textTheme.titleSmall,
                  ),
                  SizedBox(height: 8),
                  Text('• 6位十六进制：FF5722（红橙色）'),
                  Text('• 8位十六进制：FFFF5722（包含透明度）'),
                  Text('• 可以带或不带#号前缀'),
                  SizedBox(height: 8),
                  Text(
                    '提示：你可以在网上搜索"颜色选择器"来获取颜色代码',
                    style: TextStyle(
                      fontSize: 12,
                      color: Theme.of(context).colorScheme.onSurfaceVariant.withOpacity(0.7),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 32),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '当前主题预览',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    SizedBox(height: 8),
                    Container(
                      width: double.infinity,
                      padding: EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        color: Theme.of(context).colorScheme.primaryContainer,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Column(
                        children: [
                          Icon(
                            Icons.palette,
                            size: 48,
                            color: Theme.of(context).colorScheme.primary,
                          ),
                          SizedBox(height: 8),
                          Text(
                            '这是当前主题的预览效果',
                            style: TextStyle(
                              color: Theme.of(context).colorScheme.onPrimaryContainer,
                              fontSize: 16,
                            ),
                          ),
                          SizedBox(height: 8),
                          Text(
                            '当前颜色值: #${appState.themeColor.value.toRadixString(16).toUpperCase().substring(2)}',
                            style: TextStyle(
                              color: Theme.of(context).colorScheme.onPrimaryContainer.withOpacity(0.7),
                              fontSize: 12,
                              fontFamily: 'monospace',
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(height: 32),
            Divider(),
            SizedBox(height: 16),
            Text(
              '数据管理',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            SizedBox(height: 16),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '存储信息',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    SizedBox(height: 8),
                    Text('• 收藏的单词: ${appState.favorites.length} 个'),
                    Text('• 翻译缓存: ${appState.translations.length} 个'),
                    SizedBox(height: 16),
                    Text(
                      '数据会自动保存到本地，重新打开应用时会自动加载。',
                      style: Theme.of(context).textTheme.bodySmall,
                    ),
                    SizedBox(height: 16),
                    Row(
                      children: [
                        ElevatedButton.icon(
                          onPressed: () {
                            _showClearDataDialog(context, appState);
                          },
                          icon: Icon(Icons.delete_outline),
                          label: Text('清除所有数据'),
                          style: ElevatedButton.styleFrom(
                            foregroundColor: Colors.red,
                          ),
                        ),
                        SizedBox(width: 8),
                        ElevatedButton.icon(
                          onPressed: () {
                            _showExportDataDialog(context, appState);
                          },
                          icon: Icon(Icons.file_download),
                          label: Text('导出数据'),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(height: 32),
          ],
        ),
      ),
    );
  }
}
